<template>
    <el-pagination :current-page="page.page" :page-size="page.limit" :total="page.total" :page-sizes="sizes"
        layout="total, sizes, prev, pager, next, jumper" style="float:right;" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
</template>
<script>
    export default {
        props: {
            page: {
                page: {
                    type: Number,
                    default: ''
                },
                limit: {
                    type: Number,
                    default: ''
                },
                total: {
                    type: Number,
                    default: ''
                },
            },
            sizes: {
                type: Array,
                default: () => [10,20,50,100]
            }
        },
        data() {
            return {}
        },
        methods: { //切换页数
            handleSizeChange(val) {
                this.page.limit = val;
                this.$emit('size-change', this.page.limit)
            },
            // 翻页
            handleCurrentChange(val) {
                this.page.page = val;
                this.$emit('current-change', this.page.page)
            },
        }
    }
</script>
<style scoped>
</style>